import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, StyleSheet, ImageBackground } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import LinearGradient from 'react-native-linear-gradient'
import CustomImage from 'src/components/image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'
import { isEmptyObjectFn } from 'src/utils/JSTypeUtil'
import { LinearTextGradient } from 'react-native-text-gradient'

export default class CompanyInfo extends React.PureComponent {
  static propTypes = {
    company: PropTypes.object,
    member: PropTypes.object,
    memberCardClick: PropTypes.func,
    companyCardClick: PropTypes.func
  }

  static defaultProps = {
    member: {},
    company: {}
  }

  render () {
    const { company, member, companyCardClick, memberCardClick } = this.props
    const isMember = !isEmptyObjectFn(member)
    const isCompany = !isEmptyObjectFn(company)
    return (
      <View style={styles.container}>
        {!isMember && (
          <CustomButton style={styles.vipBtn} onPress={memberCardClick}>
            <CustomImage
              style={styles.vipBg}
              source={require('@/imgC/company/company_vip.png')}
            />
            <View style={styles.vipTitWrap}>
              <LinearTextGradient
                style={styles.linearTit}
                locations={[0, 1]}
                colors={['#EA417E', '#EC6758']}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
              >
                会员
              </LinearTextGradient>
              <Text style={styles.vipTitTxt}>升级</Text>
            </View>
            <View style={styles.vipDescWrapWrap}>
              <View style={styles.vipDescWrap}>
                <Text style={styles.vipdesc}>招聘效果提高90%</Text>
                <CustomImage
                  style={styles.vipTitImg}
                  source={require('@/imgC/company/company_increase1.png')}
                />
              </View>
              <View style={styles.vipDescWrap}>
                <Text style={styles.vipdesc}>升级解锁更多权限</Text>
                <CustomImage
                  style={styles.vipTitImg}
                  source={require('@/imgC/company/company_more.png')}
                />
              </View>
            </View>
          </CustomButton>
        )}
        {isMember && (
          <CustomButton style={styles.vipBtn} onPress={memberCardClick}>
            <CustomImage
              style={styles.vipBg}
              source={require('@/imgC/company/company_vip.png')}
            />
            <View style={styles.vipTitWrap}>
              <LinearTextGradient
                style={styles.linearTit}
                locations={[0, 1]}
                colors={['#EA417E', '#EC6758']}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
              >
                超级
              </LinearTextGradient>
              <Text style={styles.vipTitTxt}>会员</Text>
            </View>
            <View style={styles.vipDescWrapWrap}>
              <View style={styles.vipDescWrap}>
                <Text style={styles.vipdesc}>{member.remainingDay > 0 ? `剩余${member.remainingDay}天` : `会员已过期`}</Text>
              </View>
              <View style={styles.vipDescWrap}>
                <Text style={styles.vipdesc}>升级解锁更多权限</Text>
                <CustomImage
                  style={styles.vipTitImg}
                  source={require('@/imgC/company/company_more.png')}
                />
              </View>
            </View>
          </CustomButton>
        )}
        {!isCompany && (
          <CustomButton style={styles.companyBtn} onPress={companyCardClick}>
            <LinearGradient
              colors={['#65D797', '#5DC9C5']}
              style={styles.companyWrap}
            >
              <Text style={styles.companyName}>完善公司信息</Text>
              <View style={styles.companyDescWrap}>
                <Text style={styles.companyPercent}>0%</Text>
                <Text style={styles.companyDescText}>完善度</Text>
                <View style={styles.centerLine} />
                <Text style={styles.companyDescText}>浏览</Text>
                <Text style={[styles.companyDescText, styles.companyViewNum]}>0</Text>
              </View>
            </LinearGradient>
          </CustomButton>
        )}
        {isCompany && (
          <CustomButton style={styles.companyBtn} onPress={companyCardClick}>
            <LinearGradient
              colors={['#65D797', '#5DC9C5']}
              style={styles.companyWrap}
            >
              <Text style={styles.companyName}>{company.simpleName || company.companyName}</Text>
              <View style={styles.companyDescWrap}>
                <Text style={styles.companyPercent}>
                  {company.completeDegree}
                </Text>
                <Text style={styles.companyDescText}>完善度</Text>
                <View style={styles.centerLine} />
                <Text style={styles.companyDescText}>浏览</Text>
                <Text style={[styles.companyDescText, styles.companyViewNum]}>
                  {company.lookCount}
                </Text>
                {company.increace && (
                  <ImageBackground
                    style={styles.companyViewNumWrap}
                    source={require('@/imgC/company/company_text_wrap.png')}
                  >
                    <Text style={styles.companyViewIncreaseNum}>
                      +{company.increace}
                    </Text>
                    <CustomImage
                      style={styles.companyViewIncreaseImg}
                      source={require('@/imgC/company/company_increase2.png')}
                    />
                  </ImageBackground>
                )}
              </View>
            </LinearGradient>
          </CustomButton>
        )}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: ScaleS(43),
    marginHorizontal: ScaleS(20)
  },
  vipBtn: {
    height: ScaleS(76),
    backgroundColor: '#FFF4F4',
    borderRadius: ScaleS(10),
    paddingLeft: ScaleS(15),
    paddingTop: ScaleS(13),
    paddingRight: ScaleS(24),
    paddingBottom: ScaleS(12),
    justifyContent: 'space-between',
    position: 'relative'
  },
  vipBg: {
    position: 'absolute',
    right: ScaleS(18),
    top: ScaleS(10)
  },
  vipTitWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    height: ScaleS(25)
  },
  linearTit: {
    fontSize: ScaleT(18),
    fontWeight: '500'
  },
  vipTitTxt: {
    fontSize: ScaleT(18),
    fontWeight: '600',
    color: '#000000'
  },
  vipDescWrapWrap: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: ScaleS(18)
  },
  vipDescWrap: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  vipdesc: {
    marginRight: ScaleS(2),
    fontSize: ScaleT(13),
    fontWeight: '400',
    color: '#BAA58E'
  },
  companyBtn: {
    marginTop: ScaleS(15),
    height: ScaleS(84)
  },
  companyWrap: {
    flex: 1,
    borderRadius: ScaleS(10),
    padding: ScaleS(15),
    paddingBottom: ScaleS(12),
    justifyContent: 'space-between'
  },
  companyName: {
    fontSize: ScaleT(15),
    fontWeight: '500',
    lineHeight: ScaleS(20),
    color: '#ffffff'
  },
  companyDescWrap: {
    marginBottom: ScaleS(-3),
    flexDirection: 'row',
    alignItems: 'center',
    height: ScaleS(27)
  },
  companyPercent: {
    marginTop: ScaleS(-3),
    fontSize: ScaleT(23),
    fontWeight: 'bold',
    color: '#FCF4C4',
    marginLeft: ScaleS(1),
    marginRight: ScaleS(5)
  },
  companyDescText: {
    fontSize: ScaleT(13),
    fontWeight: '400',
    color: '#FFFFFF'
  },
  centerLine: {
    width: ScaleS(1),
    height: ScaleS(14),
    backgroundColor: '#FFFFFF',
    marginHorizontal: ScaleS(30)
  },
  companyViewNum: {
    marginHorizontal: ScaleS(5)
  },
  companyViewNumWrap: {
    minWidth: ScaleS(22),
    height: ScaleS(15),
    paddingHorizontal: ScaleS(3),
    resizeMode: 'stretch',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: ScaleS(3)
  },
  companyViewIncreaseNum: {
    fontSize: ScaleT(9),
    fontWeight: '600',
    color: '#FCF4C4'
  }
})
